<template>
  <!-- backgroundImage: `url(${$store.state.defaulheaderturl}static/bck/${bckList[num]})`, -->
  <div
    id="app"
    :class="[addClass ? 'active' : '']"
    :style="{
      backgroundImage: `url(${bck_active})`,
      filter: `grayscale(${$store.state.number})`,
    }"
  >
    <div class="pre_next" @click="autoBck"></div>

    <div class="next_bck" @click="autoplayMusic1"></div>
    <div class="bck">
      <router-view />
    </div>
    <!-- 轻音乐播放 -->
    <audio
      v-if="$store.state.isShow"
      @ended="autoplayMusic1"
      @play="
        () => {
          isPlay1;
        }
      "
      ref="audio"
      :src="`${music_active}`"
      controls
      autoplay
      class="myaudio"
    ></audio>
  </div>
</template>

<script>
let timer = null;
export default {
  data() {
    return {
      isPlay1: true,
      num: 0,
      addClass: true,
      bcktime: 20000,
      user: {},
      musicnum: 1,
      musicList: [],
      music_active: "",
      bckList: [],
      bck_active: "",
      timer: null,
    };
  },
  watch: {
    num: function (newval, old) {
      if (newval !== old) {
        this.addClass = true;
      }
    },
  },
  async created() {
    this.getBckList();
    this.getMusicList();
  },

  mounted() {
    // //调用自动换背景音乐
    // this.autoplayMusic1();
    // this.$refs.audio.volume = this.$store.state.isNumber;
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
    this.timer = null;
  },
  methods: {
    //切换背景
    // nextBck() {
    //           this.num = Math.floor(Math.random() * this.bckList.length);
    // },

    //获取后端的背景图片列表
    async getBckList() {
      let { data } = await this.$http.get("home/getBcgList/");
      // console.log(data)
      if (!data.code == 200) {
        this.$message.err("背景图片获取失败");
      } else {
        this.bckList = data.data;
        this.autoBck();
      }
    },

    //调用后端音乐
    async getMusicList() {
      //获取后端的音乐
      let { data } = await this.$http.get("home/getMusicList/");
      // console.log(data)
      if (!data.code == 200) {
        this.$message.err("背景音乐获取失败");
      } else {
        this.musicList = data.data;
        this.autoplayMusic1();
      }
    },

    // 音乐播放
    autoplayMusic1() {
      this.musicnum = Math.floor(Math.random() * this.musicList.length + 1);
      let num1 = this.musicList[this.musicnum];
      this.music_active = encodeURI(
        `${this.$store.state.defaulheaderturl}static/music/${num1}`
      );
      this.isPlay1 = true;
    },
    //调用自动换背景
    autoBck() {
      timer = setInterval(() => {
        this.num = Math.floor(Math.random() * this.bckList.length);
      }, 20000);
      let num1 = this.bckList[this.num];
      this.bck_active = encodeURI(
        `${this.$store.state.defaulheaderturl}static/bck/${num1}`
      );
    },
  },
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  all: initial;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.02em;
  color: #f5f5f5;
}

ul {
  list-style: none;
}

#app {
  background-size: cover;
  min-height: 100vh;
}
.bck {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
}
.crumb {
  height: 60px;
}

.ql-editor {
  min-height: 200px;
}

table > tbody > tr > td > form > p > p > img {
  max-width: 100%;
}

h1 {
  font-size: 24px;
  color: #f5f5f5;
}

.el-menu {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.el-submenu__title {
  color: #f5f5f5 !important;
}
.el-submenu__title:hover {
  background-color: rgba(39, 100, 150, 0.6) !important;
}
.el-menu-item {
  color: #f5f5f5 !important;
}

.el-menu-item:hover {
  background-color: rgba(39, 100, 150, 0.6) !important;
}
.is-active {
  background-color: rgba(39, 100, 150, 0.6) !important;
}

.el-form-item__label {
  color: #f5f5f5 !important;
}

.ql-formats button {
  color: #f5f5f5 !important;
}
.ql-editor.ql-blank::before {
  color: #f5f5f5 !important;
}

.fixcenter {
  padding-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lfooter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  span {
    &:nth-of-type(1) {
      margin-right: 10px;
    }
  }
}

.active {
  opacity: 1;
  transition: all 3s;
}

.el-switch,
.el-switch__core {
  width: 50px !important;
}

.myaudio {
  // display: none;
}

.pre_next {
  position: fixed;
  top: 18px;
  left: 30px;
  width: 138px;
  height: 53px;
  // background-color: #123;
}
.next_bck {
  position: fixed;
  top: 18px;
  left: 53%;
  width: 213px;
  transform: translateX(-50%);
  height: 53px;
}
</style>
